import React from 'react';
import {View, Text} from 'react-native';
import {connect} from 'react-redux';
import action from '../../store/actions/alarmOverview';
import PublicHead from '../publicComponents/PublicHead';
import {NavigationEvents} from 'react-navigation';
import Storage from '../../deviceStorage';
import VictoryNative from './VictoryNative';

import HexagonChar from './HexagonChar';

const ws = new WebSocket('wss://store.fdimall.com:3307');

/**
 * 报警总览
 */
class AlarmOverview extends React.Component {
  state = {
    data: [
      {x: '站点1', y: 1},
      {x: '站点2', y: 1},
      {x: '站点3', y: 1},
      {x: '站点5', y: 1},
      {x: '站点4', y: 1},
      {x: '站点6', y: 1},
    ],
    msg: '暂无报警',
  };
  initPage = async () => {
    ws.onopen = async () => {
      let uid = await Storage.get('token').then(res => {
        return res;
      });
      await console.log('uid:', uid);
      await ws.send(uid);
    };
    ws.onmessage = e => {
      let data = JSON.parse(e.data);
      console.log(data);
      let tempData = [];
      data.forEach(item => {
        if (item.earnings !== 0) {
          tempData.push({
            x: item.quarter,
            y: 1,
          });
        }
      });
      this.setState({
        data: tempData,
      });
    };
    ws.onerror = e => {
      console.log('onerror:', e);
    };
    ws.onclose = e => {
      console.log('onclose:', e);
    };
  };

  componentDidMount(): void {
    this.willFocus = this.props.navigation.addListener(
      'willFocus',
      async payload => {
        this.initPage();
      },
    );
  }

  componentWillUnmount(): void {
    this.willFocus.remove();
  }

  render() {
    return (
      <View>
        <NavigationEvents/>
        <PublicHead headerText={'报警概览'}/>
        {/*<VictoryNative />*/}
        <HexagonChar data={this.state.data}/>
      </View>
    );
  }
}

const mapStateToProps = state => state.alarmOverview;
export default connect(mapStateToProps, action)(AlarmOverview);
